<template>
  <div class="globleContent">
    <div id="AccountBtnBox">
      <vueButton
        :customData="AccountBtnData"
        @buttonCallback="LoadAccountWin"
      ></vueButton>
    </div>

    <el-row :gutter="20">
      <el-col :span="6" v-for="item in AccountData" :key="item.dataId">
        <el-card
          class="box-card"
          :class="{ SelectStyle: item.isSelectStyle }"
          @click.native="LoadAccountCardSelect(item.dataId)"
          @dblclick.native="LoadAccountCardUpdate(item.dataId)"
        >
          <div
            v-for="i in AccoData"
            :key="i.Id"
            class="text item overflowH CardTextBox"
          >
            <label class="left">{{ i.name }}</label>
            <p>{{ item[i.codename] }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <img :src="title_bg1" alt="" />
    <img src="@/assets/img/title_bg2.png" alt="" />
    <img src="@/assets/img/title_bg3.png" alt="" />
    <img src="@/assets/img/title_bg4.png" alt="" />
    <img src="@/assets/img/title_bg5.png" alt="" />
    <!--调用弹框-->
    <vxeDialog
      ref="vxeDialog"
      title="编辑日记账"
      :isShowWin.sync="AccWinVisible"
    >
      <accBookManaAE slot="dialogContent"></accBookManaAE>
    </vxeDialog>
    <vxeDialog
      ref="vxeAddDialog"
      title="新增日记账"
      :isShowWin.sync="AccWinAddVisible"
    >
      <accBookManaAdd slot="dialogContent"></accBookManaAdd>
    </vxeDialog>
  </div>
</template>

<script>
import vueButton from "../../components/vueButton/button";
import accBookManaAE from "./accBookManaAE";
import accBookManaAdd from "./accBookManaAdd";
import vxeDialog from "../../components/vxeDialog/vxeDialog.vue";
import title_bg1 from "@/assets/img/title_bg1.png";
import {
  LoadAccountCardAxios,
  LoadAccountCardDeleteAxios,
  LoadAccountCardisActiveAxios,
} from "./js/accBookManaGrid.js";

let AccountBtnListData = [
  {
    guid: "guis1",
    key: "/uac/system/userset",
    code: "add",
    name: "新增",
    isVisiable: 1,
    ordernum: 1,
    classname: "el-icon-circle-plus-outline",
    action: "onAdd",
    disabled: false,
    title: "新增",
    appid: "budget",
    param: null,
    config: null,
    type: "success",
    icon: "",
    tips: "我是新增",
  },
  {
    guid: "guis2",
    key: "/uac/system/userset",
    code: "delete",
    name: "删除",
    isVisiable: 1,
    ordernum: 3,
    classname: "el-icon-circle-plus-outline",
    action: "onDelete",
    disabled: false,
    title: "删除",
    appid: "budget",
    param: "",
    config: "",
    type: "success",
    icon: "",
    tips: "我是删除",
  },
  {
    guid: "guis4",
    key: "/uac/system/userset",
    code: "active",
    name: "启用",
    isVisiable: 1,
    ordernum: 4,
    classname: "el-icon-circle-plus-outline",
    action: "onActive",
    disabled: false,
    title: "启用",
    appid: "budget",
    param: "",
    config: "",
    icon: "",
    type: "",
    tips: "我是启用",
  },
  {
    guid: "guis5",
    key: "/uac/system/userset",
    code: "disable",
    name: "停用",
    isVisiable: 1,
    ordernum: 4,
    classname: "el-icon-circle-plus-outline",
    action: "onDisable",
    disabled: false,
    title: "停用",
    appid: "budget",
    param: "",
    config: "",
    icon: "",
    type: "success",
    tips: "我是停用",
  },
  {
    guid: "guis6",
    key: "/uac/system/userset",
    code: "save",
    name: "结转上年数据",
    isVisiable: 1,
    ordernum: 4,
    classname: "el-icon-circle-plus-outline",
    action: "onSave",
    disabled: false,
    title: "结转上年数据",
    appid: "budget",
    param: "",
    config: "",
    icon: "",
    type: "warning",
    tips: "我是结转上年数据",
  },
];
let AccountListData = [
  {
    Id: 1,
    Code: "0001",
    Name: "现金日记账",
    SubjectSystem: "现金日记账",
    Color: "#f0ca57",
    isSelectStyle: false,
  },
  {
    Id: 2,
    Code: "0002",
    Name: "建设银行",
    SubjectSystem: "银行存款日记账",
    Color: "#e6a23c",
    isSelectStyle: false,
  },
  {
    Id: 3,
    Code: "0003",
    Name: "工商银行",
    SubjectSystem: "银行存款日记账",
    Color: "#6c9be4",
    isSelectStyle: false,
  },
  {
    Id: 4,
    Code: "0004",
    Name: "零余额存款日记账",
    SubjectSystem: "零余额存款日记账",
    Color: "#2ad4c9",
    isSelectStyle: false,
  },
];
let AccoListData = [
  { name: "账簿编码：", Id: "1", codename: "bookCode" },
  { name: "账簿名称：", Id: "2", codename: "bookName" },
  { name: "账簿类别：", Id: "3", codename: "bookTypeStr" },
];
export default {
  name: "",
  data() {
    return {
      title_bg1: title_bg1,
      AccountData: AccountListData,
      AccountBtnData: AccountBtnListData,
      AccoData: AccoListData,
      AccWinVisible: false,
      AccWinAddVisible: false,
    };
  },
  components: {
    vueButton,
    vxeDialog,
    accBookManaAE,
    accBookManaAdd,
  },
  mounted() {
    this.LoadAccountCardData();
  },
  methods: {
    //点击新增
    LoadAccountWin(key, BtnData) {
      if (key == 1) {
        if (BtnData.action == "onAdd") {
          this.AccWinAddVisible = true; //默认页面不显示为false,点击按钮将这个属性变成true
        } else if (BtnData.action == "onDelete") {
          this.LoadAccountCardDeleteData();
        } else if (BtnData.action == "onActive") {
          this.LoadAccountCardActiveData();
        } else if (BtnData.action == "onDisable") {
          this.LoadAccountCardDisableData();
        } else if (BtnData.action == "onSave") {
        }
      }
    },
    LoadAccountCardSelect(key) {
      //选择卡片
      var AccountDataC = this.AccountData;
      for (var i = 0; i < AccountDataC.length; i++) {
        if (AccountDataC[i].Id == key) {
          AccountDataC[i].isSelectStyle = !AccountDataC[i].isSelectStyle;
          break;
        }
      }
    },
    LoadAccountCardUpdate(key) {
      //双击卡片
      this.AccWinVisible = true; //默认页面不显示为false,点击按钮将这个属性变成true
    },
    LoadAccountCardData() {
      //卡片数据加载
      // let params = { agencyId: 2 };
      // LoadAccountCardAxios(params)
      //   .then(res => {
      //     this.AccountData = res.data;
      //   })
      //   .catch(err => {
      //     console.log("请求失败：" + err.status + "," + err.statusText);
      //   });
      // this.$axios.get("/apis/cas/book/get-books?agency=2").then(res=>{
      //    this.AccountData = res.data.data;
      // })
    },
    LoadAccountCardDeleteData(CardDataId) {
      //卡片数据加载
      let params = { dataId: CardDataId };
      LoadAccountCardDeleteAxios(params)
        .then((res) => {})
        .catch((err) => {
          console.log("请求失败：" + err.status + "," + err.statusText);
        });
    },
    LoadAccountCardActiveData(CardDataId) {
      //卡片数据加载 isUsed为0:反启用 1：启用
      let params = { dataID: CardDataId, isUsed: 1 };
      LoadAccountCardisActiveAxios(params)
        .then((res) => {})
        .catch((err) => {
          console.log("请求失败：" + err.status + "," + err.statusText);
        });
    },
    LoadAccountCardDisableData(CardDataId) {
      //卡片数据加载
      let params = { dataID: CardDataId, isUsed: 0 };
      LoadAccountCardisActiveAxios(params)
        .then((res) => {})
        .catch((err) => {
          console.log("请求失败：" + err.status + "," + err.statusText);
        });
    },
  },
};
</script>

<style scoped>
@import "./css/accBookManaGrid.css";
</style>
